<template>
	<view class="content">
		
		<view class="tool">
			<view class="button" @click="selectOption(1)" :class="1 === flag ? 'active-button' : ''">所有</view>
			<view class="button" @click="selectOption(2)" :class="2 === flag ? 'active-button' : ''">已上架</view>
			<view class="button" @click="selectOption(3)" :class="3 === flag ? 'active-button' : ''">已下架</view>
			<view style="clear: both;"></view>
		</view>
		
		<view v-if="list.length>0"  class="list" v-for="(item, index) in list" :key="index">
			<view class="item">
				<view class="element line1">
					<view class="status">{{item.status}}</view>
					<view class="time">{{item.dateTime}}</view>
				</view>
				
				<view class="element line2">
					<view class="desc img">
						<image :src="item.pic"></image>
					</view>
					<view class="desc txt">
						<view class="title">{{item.name}}</view>
					</view>
				</view>
				<view class="element line3">
					<view class="desc note">{{item.note}}</view>
					<view class="desc code" v-if="flag != 3 && item.isPut != 0 && item.isPass != 0" @click="toSoldOut(index)">下 架</view>
				</view>
			</view>
		</view>
		<view class="noMore" v-show="isNoMore">暂无更多数据...</view>
		
		<!-- 修改 -->
		<uni-popup ref="popupAddress" type="center" class="popupAddress">
			<view class="popupAddress-v">
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data() {
			return {
				flag:1,
				list:[
					
				],
				isNoMore:false
			}
		},
		onLoad() {
		},
		onShow() {
			this.flag = 1;
			this.getData(1);
		},
		methods: {
			selectOption(index){
				this.flag = index;
				this.getData(index);
			},
			toSoldOut(index){
				let opts = {
					url: 'shoptool/doMarkingSoldOut/'+this.list[index].id,
					method: 'post'
				};
				let param = {};
				this.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
					let rMsg = res.msg;
					uni.showToast({
						title: rMsg,
						mask: true,
						icon: 'none',
						duration: 1500
					})
					this.list[index].status = '已下架';
					if(this.flag == 2){//上架tag情况下架移除
						this.list.splice(index,1);
					}
				}, error => {})
			},
			getData(index) { //初始化数据
				this.list=[];
				this.isNoMore = false;
				let opts = {
					url: 'shoptool/getShopMarking/'+index,
					method: 'get'
				};
				let param = {};
				this.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
					let rData = res.data;
					if(rData.length ==0){
						uni.showToast({
							title: '暂无更多数据...',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						this.isNoMore = true;
						return;
					}
					this.list = rData;
				}, error => {})
			}
		}
	}
</script>

<style>
	.content{
		color: #555;
	}
	.tool{
		margin-bottom: 30rpx;
	}
	.button {
		padding: 10px 0upx;
		float: left;
		font-size: 30rpx;
		width: 210upx;
		margin-left: 30upx;
		margin-top: 30upx;
		background-color: #fff;
		text-align: center;
		border-radius: 10rpx;
		color: #007AFF;
		border: 2upx solid #007AFF;
	}
	
	.active-button {
		background-color: #007AFF;
		color: #ffffff;
	}
	
	.response{
		width: 50rpx;
		height: 50rpx;
		margin-left: 125rpx;
		margin-top: 20rpx;
	}
	
	.nullData{
		text-align: center;
		margin-top: 50rpx;
	}
	.nullData image{
		width: 360rpx;
		height: 360rpx;
	}
	
	.element .desc{
		float: left;
	}
	.line3 .note{
		color: #999999;
		font-size: 28rpx;
		width: 520rpx;
	}
	.line3 .code{
		background-color: #007AFF;
		color: #fff;
		margin-left: 10rpx;
		font-size: 30rpx;
		border-radius: 15rpx;
		padding: 5rpx 20rpx;
	}
	.line2 .img{
		width: 120rpx;
	}
	.line2 .txt{
		width: 520rpx;
	}
	
	.line2 .desc{
		float: left;
	}
	.status{
		float: left;
		font-size: 32rpx;
		font-weight: 800;
	}
	.time{
		float: right;
		font-size: 28rpx;
	}
	.line1{
		overflow: hidden;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #E6E6E6;
		padding-bottom: 10rpx;
	}
	.item{
		width: 670upx;
		background-color: #fff;
		margin: 10rpx 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
	}
	image{
		width: 100rpx;
		height: 100rpx;
	}
	.element{
		overflow: hidden;
	}
	.element .getInfo{
		font-size: 30rpx;
		margin: 8rpx;
	}
	
	/**
	 * 收货地址
	 */
	.popupAddress-v .btn-v {
		padding-top: 30upx;
	}
	.itemBox {
		height: 650rpx;
	}
	.toPick,
	.toUpdate {
		display: inline;
		border-radius: 10upx;
		padding: 15upx;
		color: #fff;
		background-color: #282828;
	}
	.toUpdate {
		margin-right: 20upx;
	}
	.toPick {
		margin-left: 20upx;
	}
	.popupAddress-v .name {
		font-weight: 800;
	}
	.popupAddress-v {
		width: 500upx;
		font-size: 30rpx;
		background-color: #fff;
		padding: 30upx;
		text-align: center;
		border-radius: 20upx;
	}
	.popupAddress-v image {
		position: absolute;
		left: 10upx;
		top: 10upx;
		width: 40upx;
		height: 40upx;
	}
	.selectAdd {
		margin-bottom: 20upx;
		font-weight: 800;
		font-size: 32upx;
	}
	.popupAddress-v .item-addr {
		border: 2upx solid #c0c0c0;
		margin-bottom: 15upx;
		border-radius: 10upx;
		position: relative;
	}
	.popupAddress-v .txt {
		margin: 10upx;
	}
	
</style>
